<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./elementui/vue.min.js"></script>
    <link rel="stylesheet" href="./elementui/index.css">
    <script src="./elementui/index.js"></script>
    <!--    <script src="./codemirror/vue-codemirror.js"></script>-->
    <script src="./codemirror/lib/codemirror.js"></script>

    <link rel="stylesheet" href="./codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="./codemirror/theme/3024-day.css">
    <link rel="stylesheet" href="./codemirror/theme/ayu-mirage.css">
    <link rel="stylesheet" href="./codemirror/theme/monokai.css">
    <link rel="stylesheet" href="./codemirror/theme/rubyblue.css">


</head>
<body>
<div id="example-1">
    <div class="content">
        <codemirror ref="jsonEditor" v-model="jsonData" :options="options"></codemirror>
        <el-button @click="format"> 格式化</el-button>
    </div>
</div>

<script type="module">

    import {codemirror} from "./codemirror/vue-codemirror.js";
    // html代码高亮
    import "./codemirror/mode/htmlmixed/htmlmixed.js";

    // 语言模式
    import './codemirror/mode/javascript/javascript.js'


    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ],
            code: "",
            jsonData: "",
            options: {
                line: true,
                theme: "rubyblue", // 主题
                tabSize: 4, // 制表符的宽度
                indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
                firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
                readOnly: false, // 只读
                autorefresh: true,
                smartIndent: true, // 上下文缩进
                lineNumbers: true, // 是否显示行号
                styleActiveLine: true, // 高亮选中行
                viewportMargin: Infinity, //处理高度自适应时搭配使用
                showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
                mode: 'application/json',

            },

        },
        components: {
            codemirror,
        },
        computed: {
            codemirror() {
                return this.$refs.jsonEditor.codemirror
            },
            test(){
                let data = this.codemirror.getValue();
            }
        },
        methods: {
            format() {
                this.$nextTick(() => {
                    this.codemirror.setValue((JSON.stringify(JSON.parse(this.jsonData), null, 2)))
                })
            }
        }
    })
</script>
</body>
</html>
